<template>
  <div>
    <span id="qqLoginBtn" v-show="false"></span>
    <m-svg-icon
      class="w-4 cursor-pointer"
      name="qq"
      @click="onQQLoginclick"
    ></m-svg-icon>
  </div>
</template>
<script>
// QQ 登录的 URL
const QQ_LOGIN_URL =
  'https://graph.qq.com/oauth2.0/authorize?client_id=101998494&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fimooc-front.lgdsunday.club%2Flogin'
</script>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import broadcast from './broadcast'
import author from './author.js'
onMounted(() => {
  QC.Login({ btnId: 'qqLoginBtn' }, (data, opts) => {
    QC.Login.singOut() // 先执行退出登录
    // 获取当前用户登录的token
    // 2. 获取当前用户唯一标识，作为判断用户是否已注册的依据
    const accessToken = /access_token=((.*))&expires_in/.exec(
      window.location.hash
    )[1]
    const authObj = {
      nickName: data.nickName,
      figureurl_qq_2: data.figureurl_qq_2,
      accessToken: accessToken
    }
    // 跨页面传输数据
    broadcast.sendMessage(authObj)
    author('QQ', authObj)
    // 关闭qq登录窗口
    window.close()
  })
})
const onQQLoginclick = () => {
  openQQLoginLog()
}

const openQQLoginLog = () => {
  window.open(
    QQ_LOGIN_URL,
    'oauth2Login_10609',
    'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'
  )
  broadcast.waitCallBack().then((res) => {
    // 如果拿到当前用户信息则销毁
    broadcast.destroy()
    author('QQ', res)
  })
}
</script>
<style scoped lang="scss"></style>
